<template>
  <div>
    <van-nav-bar fixed title="会员列表" left-arrow @click-left="$utils.back($route.path)" />
    <div class="has-top">
      <div class="head-bg-box bg-primary pos-a"></div>
      <!-- 背景 -->
      <div class="page-content-box mlr-25">
        <stateFilter :filterList="filterList" theme="0" @getData="getData"></stateFilter>
        <!-- 标签栏 -->
        <content-search
          style="margin-top:0"
          class="mb-40"
          theme="0"
          placeholder="请输入会员号/姓名/手机"
          :searchVal="searchVal"
          @clear="clear"
          @getVal="getVal"
          @search="search"
        />
        <!-- 搜索栏 -->
        <div class="bg-white br-12">
          <record-list :list="memberList" imgSize="90" type="member" @openDetail="openDetail"></record-list>
          <no-data v-if="memberList.length === 0" />
          <p v-if="end === true && memberList.length !== 0" class="tac fs-24 ptb-40 color-gray-light">无更多数据</p>
        </div>
        <!-- 列表 -->
      </div>
    </div>
  </div>
</template>

<script>
import contentSearch from 'components/contentSearch'
import recordList from 'components/recordList'
import stateFilter from 'components/stateFilter'
import noData from 'components/noData'
import { GetStoreMemberPage, GetStoreMemberTotal } from 'api/store'
import utils from 'utils/utils'
export default {
  components: {
    contentSearch,
    recordList,
    stateFilter,
    noData
  },
  data() {
    return {
      searchVal: undefined,
      // 标签栏
      filterList: [],
      gradeIdList: [],
      requestData: {
        PageIndex: 1,
        PageSize: 10
      },

      //会员列表
      memberList: [],

      //滚动状态
      totalAmout: 0,
      scollRequest: true,
      end: false
    }
  },
  computed: {},
  created() {
    this.GetStoreMemberTotal()
    this.GetStoreMemberPage()
  },
  mounted() {
    this.$nextTick(function() {
      window.addEventListener('scroll', this.onScroll)
    })
  },
  methods: {
    GetStoreMemberTotal() {
      let _this = this
      GetStoreMemberTotal().then(res => {
        if (res) {
          console.log(res)
          if (res.Data.length && res.Data.length > 0) {
            res.Data.forEach(tem => {
              let item = tem.Key + '(' + tem.Attach + ')'
              _this.filterList.push(item)
              _this.gradeIdList.push(tem.Value)
            })
          }
        }
      })
    },
    GetStoreMemberPage() {
      let _this = this
      GetStoreMemberPage(_this.requestData).then(res => {
        if (res) {
          _this.scollRequest = true
          _this.end = false
          _this.totalAmout = res.TotalAmout
          if (res.Data.length && res.Data.length > 0) {
            res.Data.forEach(tem => {
              tem.Id = tem.UserId
              _this.memberList.push(tem)
            })
          }
        }
      })
    },
    search(val) {
      this.requestData.SearchKey = val
      this.requestData.PageIndex = 1
      this.memberList = []
      this.GetStoreMemberPage()
    },
    clear() {
      this.searchVal = undefined
    },
    getVal(val) {
      this.searchVal = val
    },
    getData(val) {
      this.scollRequest = true
      this.end = false
      this.clear()
      this.requestData.PageIndex = 1
      this.requestData.SearchKey = undefined
      this.requestData.MemberGradeId = parseInt(this.gradeIdList[val.index])
      this.memberList = []
      this.GetStoreMemberPage()
    },
    openDetail(val) {
      console.log(val)
      this.$router.push('/memberManage/detail/' + val)
    },
    // 滚动事件触发下拉加载
    onScroll() {
      let _this = this
      if (_this.scollRequest === true) {
        if (utils.getScrollHeight() - utils.getClientHeight() - utils.getScrollTop() <= 5) {
          _this.scollRequest = false
          // alert('触发！！！')
          console.log('chufa')
          if (_this.requestData.PageIndex < _this.totalAmout) {
            _this.requestData.PageIndex++
            _this.GetStoreMemberPage()
          } else {
            console.log('end')
            _this.end = true
          }
          // }
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.head-bg-box {
  height: 342px;
}
</style>
